<template>
  <div id="global-header">
    <a-row :wrap="false">
      <a-col flex="200px">
        <router-link to="/">
          <div class="title-bar">
            <img class="logo" src="../assets/vue.svg" alt="logo" />
            <div class="title">一点AI</div>
          </div>
        </router-link>
      </a-col>
      <a-col flex="auto">
        <a-menu mode="horizontal" :selectedKeys="[currentRoute]">
          <a-menu-item key="home" @click="goToPage('home')">首页</a-menu-item>
          <a-menu-item key="modal" @click="goToPage('modal')"
            >弹窗展示</a-menu-item
          >
          <a-menu-item key="record" @click="goToPage('record')"
            >记录</a-menu-item
          >
          <a-menu-item key="aiChat" @click="goToPage('aiChat')"
            >AI聊天</a-menu-item
          >
        </a-menu>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { ref } from "vue";
import { HomeOutlined } from "@ant-design/icons-vue";

const router = useRouter();
const currentRoute = ref(router.currentRoute.value.name);

function goToPage(routeName: string) {
  router.push({ name: routeName });
}
</script>

<style lang="scss" scoped>
#global-header {
  .title-bar {
    display: flex;
    align-items: center;
    .logo {
      height: 36px;
    }
    .title {
      color: black;
      font-size: 18px;
      margin-left: 16px;
    }
  }
  .ant-menu {
    background: none;
  }
}
</style>
